<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单控件绑定-基础用法</title>
  </head>
  <body>
    <div class="" id="app">
      <form class="" action="index.html" method="post">
        <div class="">
          <span>Message is: {{message}}</span><br>
          <input v-model="message" type="text" name="name" value="" placeholder="输入...">
        </div>
        <hr>
        <div class="">
            <input type="checkbox" id="checkbox" v-model="checked" name="name" value="">
            <label for="checkbox">{{checked}}</label>
        </div>
        <hr>
        <div class="">
            <input v-model="checkedNames" id="jfinal" type="checkbox" value="jfinal">
            <label for="jfinal">jfinal</label>
            <input v-model="checkedNames" id="spring" type="checkbox" value="spring">
            <label for="spring">spring</label>
            <input v-model="checkedNames" id="beeltsql" type="checkbox" value="beeltsql">
            <label for="beeltsql">beeltsql</label>
            <br>
            <span>Checked names: {{checkedNames | json}}< /span>
        </div>
        <hr>
        <div class="">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{picked}}</span>
        </div>
        <hr>
        <div class="">
            <select v-model="selected">
              <option selected>A</option>
              <option>B</option>
              <option>C</option>
            </select>
            <br>
            <span>Selected: {{selected}}</span>
        </div>
        <hr>
        <div class="">
            <select v-model="selected2" multiple>
              <option selected>A</option>
              <option>B</option>
              <option>C</option>
            </select>
            <br>
            <span>Selected: {{selected2 | json}}</span>
        </div>
        <hr>
        <div class="">
            <select v-model="selected3">
              <option v-for="option in options" :value="option.value">
                {{option.text}}
              </option>
            </select>
            <br>
            <span>Selected: {{selected3 | json}}</span>
        </div>
      </form>
    </div>

    <script src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
    <script src="js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      var vm;
      $(function(){
        vm = new Vue({
          el:"#app",
          data:{
            message:'',
            checkedNames:[],
            options:[
              {value:'A',text:'One'},
              {value:'B',text:'Two'},
              {value:'C',text:'Three'}
            ]
          }
        })
      })
    </script>
  </body>
</html>
